<template>
  <div style="min-height: 90vh;">
    <el-empty v-if="articles.length===0" :image-size="370" />
    <el-table v-else v-loading="loading" :data="articles" style="padding-top: 30px">
      <el-table-column label="标题" align="center" prop="title" />
      <el-table-column label="浏览量" align="center" prop="see" />

      <el-table-column label="文章照片" align="center" prop="img" >
        <template #default="scope">
          <image-preview :src="scope.row.img" :width="50" :height="50"/>
        </template>
      </el-table-column>

      <el-table-column prop="articleLabel" label="文章标签"  align="center">

      </el-table-column>

      <el-table-column label="操作" align="center" >
        <template #default="scope">
          <el-button class="my-button" link type="primary" icon="Pointer" @click="jumpArticle(scope.row.id)" >查看</el-button>
        </template>
      </el-table-column>

    </el-table>
    <Paging style="padding-top: 50px" :articleTotal="articleTotal" :send-current="getCurrent" :send-size="getSize" />
  </div>
</template>
<script setup >

import {onMounted, reactive, ref, toRefs} from "vue";
const articles = ref([]);
import imagePreview from '@/components/articleDetil/ImagePreview/index.vue'
import router from "@/router/index.js";
import Paging from "@/components/paging/Paging.vue";
import { listArticleCollect} from "@/api/article.js";
import {ElMessage} from "element-plus";
const articleTotal = ref(0)

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 5,
    title: null,
  },
});
const { queryParams, } = toRefs(data);
const loading = ref(false);


async function getCurrent(current){
  data.queryParams.pageNum = current
  getList();
}
async function getSize(size){
  data.queryParams.pageSize = size
  getList();
}
/** 搜索按钮操作
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}*/

/**
 * 跳转文章详情
 */
function jumpArticle(id){
  router.push({
    name:'MDEditor',
    params:{
      articleId:id
    }
  })
}
/** 查询文章列表 */
function getList() {
  listArticleCollect(queryParams.value).then(response => {
    if (response.data.code === 401){
      ElMessage.info("暂无数据")
    }else {
      articles.value = response.data.rows;
      articleTotal.value = response.data.total;
      loading.value = false;
    }
  });
}

/** 重置按钮操作
function resetQuery() {
  data.queryParams.pageSize = 5
  data.queryParams.pageNum = 1
  data.queryParams.title = null
  handleQuery();
}*/
onMounted(async ()=>{
  await getList()
})

</script>

<style scoped>

</style>